<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import Phone from './Phone.vue';


defineProps<{
}>()

</script>

<template>
  		<div class="book">		
			<div class="up"></div>			
			<div class="bottom"></div>
      <div class="front">
        <div class="text">java编程思想</div>
      </div>
      <div class="back"></div>
			<div class="left"></div>
			<div class="right">
        <div>java编程思想</div>
      </div>
		</div>
</template>

<style scoped>
.book {
  --width:3em;
  --height:20em;
  --deep:13em;
  --colorFront:rgb(116, 70, 2);
  --colorBack:rgb(249, 250, 249);
  --colorLeft:rgb(197, 121, 71);
  --colorRight:rgb(197, 121, 71);
  --colorUp:rgb(249, 250, 249) ;
  --colorBottom:rgb(249, 250, 249);
  
  transform-style: preserve-3d;
  perspective:110em;
  transform: rotate3d(1, 0, 0, -10deg) rotate3d(0, 1, 0, -10deg);
  /* animation: rotate 3s linear infinite; */
    position: absolute;
    top:2.5em;
    transform-origin: 50% 50%;
    
  }
  @keyframes rotate {
      0% {        
          transform: rotate3d(1, 1, 1, 0deg);
      }
      100% {        
          transform: rotate3d(1, 1, 1, 360deg);
      }
  }
.book .up {
  width: var(--width);
  height: var(--deep);
  background-color: var(--colorUp);
  position:absolute;
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0,0,calc(var(--height) * -1));  
  transform-origin: 0 0;
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
  border-radius: 2em;
}
.book .bottom {
  width: var(--width);
  height: var(--deep);
  background-color: var(--colorBottom);
  position:absolute;
  transform: rotate3d(1, 0, 0, 90deg);  
  transform-origin: 0 0;
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
}
.book .front {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  background-color: var(--colorFront);
  transform: translate3d(0 , 0 ,calc(var(--deep)*1));    
  
}
.book .front .text {  
  font-size: calc(var(--width)*0.4);
  writing-mode: vertical-rl;
  padding: 2em 0.2em;
  color: white;
}

.book .back {  
  width: var(--width);
  height: var(--height);
  position:absolute;
  background-color: var(--colorBack);
  box-shadow: inset 0 0 0.1em 0.1em #00000050;
}

.book .left {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorLeft);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,0);
  transform-origin: 0 0;
  /*  */
}

.book .right {    
  width: var(--deep);
  height: var(--height);
  position:absolute;  
  background-color: var(--colorRight);
  transform: rotate3d(0, 1, 0, 90deg)translate3d( calc(var(--deep) * -1),0 ,calc(var(--width) * 1));
  transform-origin: 0 0;
  /*  */
}
.book .right div {  
  font-size: calc(var(--width)*0.4);
  padding: 2em 2em;
  color: white;
}

</style>